<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>消息与通讯录 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 通用样式 */
    :root {
      --primary: #4263EB;
      --secondary: #6B7280;
      --success: #10B981;
      --warning: #FBBF24;
      --danger: #EF4444;
      --light: #F3F4F6;
      --dark: #1F2937;
      --white: #FFFFFF;
      --gray: #9CA3AF;
      --border: #E5E7EB;
      --unread: #E8F0FE;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #F9FAFB;
      color: var(--dark);
      margin: 0;
      height: 100vh;
      overflow: hidden;
    }
    
    /* 页面容器 */
    .app-container {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    /* 顶部导航 */
    .app-header {
      background-color: var(--white);
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border);
      position: relative;
      z-index: 10;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .header-actions {
      display: flex;
      gap: 16px;
    }
    
    .header-btn {
      background: none;
      border: none;
      color: var(--dark);
      font-size: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* 视图切换标签 */
    .view-tabs {
      display: flex;
      background-color: var(--white);
      border-bottom: 1px solid var(--border);
    }
    
    .view-tab {
      flex: 1;
      padding: 14px 0;
      background: none;
      border: none;
      font-size: 16px;
      font-weight: 500;
      color: var(--secondary);
      position: relative;
    }
    
    .view-tab.active {
      color: var(--primary);
    }
    
    .view-tab.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: var(--primary);
      border-radius: 3px 3px 0 0;
    }
    
    /* 内容区域 */
    .content-area {
      flex: 1;
      overflow-y: auto;
      position: relative;
    }
    
    .view-content {
      display: none;
    }
    
    .view-content.active {
      display: block;
    }
    
    /* 搜索栏 */
    .search-bar {
      padding: 10px 16px;
      background-color: var(--white);
      border-bottom: 1px solid var(--border);
    }
    
    .search-input {
      width: 100%;
      padding: 10px 16px 10px 40px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background-color: var(--light);
      font-size: 14px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239CA3AF' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: 14px center;
    }
    
    .search-input:focus {
      outline: none;
      border-color: var(--primary);
      background-color: white;
    }
    
    /* 消息列表 */
    .message-list, .contact-list {
      background-color: var(--white);
    }
    
    .list-item {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .list-item:hover {
      background-color: rgba(0,0,0,0.02);
    }
    
    .list-item.unread {
      background-color: var(--unread);
    }
    
    .item-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      position: relative;
    }
    
    .status-indicator {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid var(--white);
    }
    
    .status-online {
      background-color: var(--success);
    }
    
    .status-offline {
      background-color: var(--gray);
    }
    
    .status-away {
      background-color: var(--warning);
    }
    
    .item-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    
    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2px;
    }
    
    .item-name {
      font-weight: 600;
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .item-time {
      font-size: 12px;
      color: var(--gray);
    }
    
    .item-message {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .message-text {
      font-size: 14px;
      color: var(--secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }
    
    .message-icon {
      margin-left: 8px;
      font-size: 14px;
      color: var(--primary);
    }
    
    .unread-badge {
      background-color: var(--primary);
      color: white;
      font-size: 11px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 8px;
    }
    
    /* 通讯录分组标题 */
    .contact-group {
      padding: 8px 16px;
      background-color: var(--light);
      color: var(--gray);
      font-size: 14px;
      font-weight: 500;
    }
    
    /* 侧边字母导航 */
    .letter-nav {
      position: fixed;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 2px;
      z-index: 5;
    }
    
    .letter-btn {
      background: none;
      border: none;
      width: 24px;
      height: 24px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--gray);
      cursor: pointer;
    }
    
    .letter-btn:hover, .letter-btn.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 弹出窗口样式 */
    .modal-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
    }
    
    .modal-backdrop.active {
      opacity: 1;
      visibility: visible;
    }
    
    .modal {
      background-color: var(--white);
      border-radius: 16px;
      width: 90%;
      max-width: 360px;
      transform: translateY(20px);
      transition: transform 0.3s;
    }
    
    .modal-backdrop.active .modal {
      transform: translateY(0);
    }
    
    .modal-header {
      padding: 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .modal-close {
      background: none;
      border: none;
      font-size: 20px;
      color: var(--gray);
      cursor: pointer;
    }
    
    .modal-body {
      padding: 16px;
    }
    
    .modal-footer {
      padding: 12px 16px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }
    
    .modal-btn {
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .modal-btn-secondary {
      background-color: var(--light);
      color: var(--dark);
      border: none;
    }
    
    .modal-btn-secondary:hover {
      background-color: #E5E7EB;
    }
    
    .modal-btn-primary {
      background-color: var(--primary);
      color: white;
      border: none;
    }
    
    .modal-btn-primary:hover {
      background-color: #3652d2;
    }
    
    /* 操作菜单 */
    .action-sheet {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: var(--white);
      border-radius: 16px 16px 0 0;
      padding: 20px 16px 16px;
      z-index: 1000;
      transform: translateY(100%);
      transition: transform 0.3s;
    }
    
    .action-sheet.active {
      transform: translateY(0);
    }
    
    .action-sheet-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
    }
    
    .action-sheet-backdrop.active {
      opacity: 1;
      visibility: visible;
    }
    
    .action-title {
      text-align: center;
      font-size: 14px;
      color: var(--gray);
      margin-bottom: 16px;
    }
    
    .action-buttons {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .action-btn {
      padding: 14px;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 500;
      border: none;
      text-align: center;
      cursor: pointer;
    }
    
    .action-btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .action-btn-danger {
      background-color: #FEF2F2;
      color: var(--danger);
    }
    
    .action-btn-cancel {
      background-color: var(--light);
      color: var(--dark);
      margin-top: 10px;
    }
    
    /* 顶部提示 */
    .toast {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(-100px);
      background-color: var(--dark);
      color: white;
      padding: 10px 16px;
      border-radius: 8px;
      font-size: 14px;
      z-index: 1000;
      transition: transform 0.3s;
    }
    
    .toast.active {
      transform: translateX(-50%) translateY(0);
    }
    
    /* 风格切换器 */
    .style-switcher {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 1001;
      background: white;
      border-radius: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    
    .style-btn {
      border: none;
      background: none;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 12px;
    }
    
    .style-btn.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 风格1：默认蓝 */
    #style1 .view-tab.active {
      color: var(--primary);
    }
    
    #style1 .view-tab.active::after {
      background-color: var(--primary);
    }
    
    /* 风格2：卡片式 */
    #style2 {
      --unread: #FFFFFF;
    }
    
    #style2 body {
      background-color: #F0F2F5;
    }
    
    #style2 .message-list, 
    #style2 .contact-list {
      background-color: transparent;
      padding: 10px;
    }
    
    #style2 .list-item {
      background-color: var(--white);
      border-radius: 12px;
      margin-bottom: 8px;
      border-bottom: none;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    
    #style2 .list-item.unread {
      border: 2px solid var(--primary);
      padding: 10px 14px;
    }
    
    #style2 .view-tabs,
    #style2 .search-bar {
      background-color: #F0F2F5;
      border-bottom: none;
    }
    
    #style2 .view-tab {
      padding: 12px 0;
    }
    
    #style2 .view-tab.active {
      background-color: var(--white);
      border-radius: 20px;
      color: var(--primary);
    }
    
    #style2 .view-tab.active::after {
      display: none;
    }
    
    #style2 .search-input {
      background-color: var(--white);
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    
    /* 风格3：深色模式 */
    #style3 {
      --dark: #F3F4F6;
      --white: #1F2937;
      --border: #374151;
      --gray: #9CA3AF;
      --light: #374151;
      --unread: #2D3748;
    }
    
    #style3 body {
      background-color: #111827;
      color: var(--dark);
    }
    
    #style3 .app-header,
    #style3 .view-tabs,
    #style3 .search-bar,
    #style3 .message-list,
    #style3 .contact-list,
    #style3 .contact-group {
      background-color: var(--white);
    }
    
    #style3 .view-tab {
      color: var(--gray);
    }
    
    #style3 .list-item:hover {
      background-color: rgba(255,255,255,0.05);
    }
    
    #style3 .status-indicator {
      border-color: var(--white);
    }
    
    #style3 .action-sheet,
    #style3 .modal {
      background-color: var(--white);
    }
    
    #style3 .action-btn-cancel {
      background-color: var(--light);
      color: var(--dark);
    }
    
    #style3 .toast {
      background-color: rgba(255,255,255,0.8);
      color: var(--dark);
    }
    
    /* 风格4：简约风 */
    #style4 {
      --primary: #374151;
      --unread: rgba(0,0,0,0.03);
    }
    
    #style4 .app-header,
    #style4 .view-tabs,
    #style4 .search-bar {
      padding: 10px 16px;
    }
    
    #style4 .item-avatar {
      width: 44px;
      height: 44px;
    }
    
    #style4 .item-name {
      font-size: 15px;
    }
    
    #style4 .message-text,
    #style4 .item-time {
      font-size: 13px;
    }
    
    #style4 .view-tab {
      font-size: 15px;
      padding: 12px 0;
    }
    
    #style4 .view-tabs {
      border-bottom: none;
    }
    
    #style4 .search-input {
      padding: 8px 16px 8px 40px;
      background-color: white;
      border: 1px solid #E5E7EB;
    }
    
    #style4 .unread-badge {
      width: 18px;
      height: 18px;
      font-size: 10px;
    }
  </style>
</head>
<body>
  <!-- 风格切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="style1">风格1</button>
    <button class="style-btn" data-style="style2">风格2</button>
    <button class="style-btn" data-style="style3">风格3</button>
    <button class="style-btn" data-style="style4">风格4</button>
  </div>
  
  <!-- 应用容器 -->
  <div class="app-container">
    <!-- 风格1：默认蓝 -->
    <div id="style1" class="app-style active">
      <!-- 顶部导航 -->
      <div class="app-header">
        <h1 class="header-title">社交平台</h1>
        <div class="header-actions">
          <button class="header-btn" id="newChatBtn1">
            <i class="fa fa-plus"></i>
          </button>
          <button class="header-btn" id="moreBtn1">
            <i class="fa fa-ellipsis-v"></i>
          </button>
        </div>
      </div>
      
      <!-- 视图切换标签 -->
      <div class="view-tabs">
        <button class="view-tab active" data-view="messages">消息</button>
        <button class="view-tab" data-view="contacts">通讯录</button>
      </div>
      
      <!-- 搜索栏 -->
      <div class="search-bar">
        <input type="text" class="search-input" placeholder="搜索消息或联系人...">
      </div>
      
      <!-- 内容区域 -->
      <div class="content-area">
        <!-- 消息列表视图 -->
        <div class="view-content active" id="messagesView1">
          <div class="message-list">
            <!-- 未读消息 -->
            <div class="list-item unread">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=1" alt="头像" class="item-avatar">
                <span class="status-indicator status-online"></span>
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">张小明</span>
                  <span class="item-time">刚刚</span>
                </div>
                <div class="item-message">
                  <span class="message-text">好的，我稍后发给你</span>
                  <span class="unread-badge">2</span>
                </div>
              </div>
            </div>
            
            <!-- 未读群消息 -->
            <div class="list-item unread">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=10" alt="头像" class="item-avatar">
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">设计交流群</span>
                  <span class="item-time">10:24</span>
                </div>
                <div class="item-message">
                  <span class="message-text"><span class="message-icon"><i class="fa fa-at"></i></span> 李华：@你 这个设计很棒</span>
                  <span class="unread-badge">5</span>
                </div>
              </div>
            </div>
            
            <!-- 已读消息 -->
            <div class="list-item">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=2" alt="头像" class="item-avatar">
                <span class="status-indicator status-away"></span>
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">王芳</span>
                  <span class="item-time">昨天</span>
                </div>
                <div class="item-message">
                  <span class="message-text">我们下周再讨论细节吧</span>
                </div>
              </div>
            </div>
            
            <div class="list-item">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=3" alt="头像" class="item-avatar">
                <span class="status-indicator status-offline"></span>
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">创意工作室</span>
                  <span class="item-time">昨天</span>
                </div>
                <div class="item-message">
                  <span class="message-text"><span class="message-icon"><i class="fa fa-picture-o"></i></span> 发送了3张图片</span>
                </div>
              </div>
            </div>
            
            <div class="list-item">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=4" alt="头像" class="item-avatar">
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">视频制作团队</span>
                  <span class="item-time">08-15</span>
                </div>
                <div class="item-message">
                  <span class="message-text">视频初稿已经完成，请查收</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 通讯录视图 -->
        <div class="view-content" id="contactsView1">
          <div class="contact-list">
            <!-- 常用联系人 -->
            <div class="contact-group">常用联系人</div>
            
            <div class="list-item">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=1" alt="头像" class="item-avatar">
                <span class="status-indicator status-online"></span>
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">张小明</span>
                </div>
                <div class="item-message">
                  <span class="message-text">产品设计师</span>
                </div>
              </div>
            </div>
            
            <div class="list-item">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=2" alt="头像" class="item-avatar">
                <span class="status-indicator status-away"></span>
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">王芳</span>
                </div>
                <div class="item-message">
                  <span class="message-text">UI设计师</span>
                </div>
              </div>
            </div>
            
            <!-- A字母分组 -->
            <div class="contact-group">A</div>
            
            <div class="list-item">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=5" alt="头像" class="item-avatar">
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">阿强</span>
                </div>
                <div class="item-message">
                  <span class="message-text">前端开发</span>
                </div>
              </div>
            </div>
            
            <!-- B字母分组 -->
            <div class="contact-group">B</div>
            
            <div class="list-item">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=6" alt="头像" class="item-avatar">
                <span class="status-indicator status-online"></span>
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">白露</span>
                </div>
                <div class="item-message">
                  <span class="message-text">市场专员</span>
                </div>
              </div>
            </div>
            
            <!-- C字母分组 -->
            <div class="contact-group">C</div>
            
            <div class="list-item">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=3" alt="头像" class="item-avatar">
                <span class="status-indicator status-offline"></span>
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">创意工作室</span>
                </div>
                <div class="item-message">
                  <span class="message-text">设计公司</span>
                </div>
              </div>
            </div>
            
            <div class="list-item">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=7" alt="头像" class="item-avatar">
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">陈明亮</span>
                </div>
                <div class="item-message">
                  <span class="message-text">项目经理</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 侧边字母导航 -->
          <div class="letter-nav">
            <button class="letter-btn">常</button>
            <button class="letter-btn">A</button>
            <button class="letter-btn">B</button>
            <button class="letter-btn">C</button>
            <button class="letter-btn">D</button>
            <button class="letter-btn">E</button>
            <button class="letter-btn">F</button>
            <button class="letter-btn">G</button>
            <button class="letter-btn">...</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格2：卡片式 -->
    <div id="style2" class="app-style">
      <!-- 结构与风格1相同，样式由CSS控制 -->
      <div class="app-header">
        <h1 class="header-title">社交平台</h1>
        <div class="header-actions">
          <button class="header-btn" id="newChatBtn2">
            <i class="fa fa-plus"></i>
          </button>
          <button class="header-btn" id="moreBtn2">
            <i class="fa fa-ellipsis-v"></i>
          </button>
        </div>
      </div>
      
      <div class="view-tabs">
        <button class="view-tab active" data-view="messages">消息</button>
        <button class="view-tab" data-view="contacts">通讯录</button>
      </div>
      
      <div class="search-bar">
        <input type="text" class="search-input" placeholder="搜索消息或联系人...">
      </div>
      
      <div class="content-area">
        <div class="view-content active" id="messagesView2">
          <div class="message-list">
            <!-- 消息列表内容与风格1相同 -->
            <div class="list-item unread">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=1" alt="头像" class="item-avatar">
                <span class="status-indicator status-online"></span>
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">张小明</span>
                  <span class="item-time">刚刚</span>
                </div>
                <div class="item-message">
                  <span class="message-text">好的，我稍后发给你</span>
                  <span class="unread-badge">2</span>
                </div>
              </div>
            </div>
            
            <div class="list-item unread">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=10" alt="头像" class="item-avatar">
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">设计交流群</span>
                  <span class="item-time">10:24</span>
                </div>
                <div class="item-message">
                  <span class="message-text"><span class="message-icon"><i class="fa fa-at"></i></span> 李华：@你 这个设计很棒</span>
                  <span class="unread-badge">5</span>
                </div>
              </div>
            </div>
            
            <div class="list-item">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=2" alt="头像" class="item-avatar">
                <span class="status-indicator status-away"></span>
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">王芳</span>
                  <span class="item-time">昨天</span>
                </div>
                <div class="item-message">
                  <span class="message-text">我们下周再讨论细节吧</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="view-content" id="contactsView2">
          <div class="contact-list">
            <!-- 通讯录内容与风格1相同 -->
            <div class="contact-group">常用联系人</div>
            
            <div class="list-item">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=1" alt="头像" class="item-avatar">
                <span class="status-indicator status-online"></span>
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">张小明</span>
                </div>
                <div class="item-message">
                  <span class="message-text">产品设计师</span>
                </div>
              </div>
            </div>
            
            <div class="list-item">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=2" alt="头像" class="item-avatar">
                <span class="status-indicator status-away"></span>
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">王芳</span>
                </div>
                <div class="item-message">
                  <span class="message-text">UI设计师</span>
                </div>
              </div>
            </div>
          </div>
          
          <div class="letter-nav">
            <button class="letter-btn">常</button>
            <button class="letter-btn">A</button>
            <button class="letter-btn">B</button>
            <button class="letter-btn">C</button>
            <button class="letter-btn">...</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格3：深色模式 -->
    <div id="style3" class="app-style">
      <!-- 结构与风格1相同，样式由CSS控制 -->
      <div class="app-header">
        <h1 class="header-title">社交平台</h1>
        <div class="header-actions">
          <button class="header-btn" id="newChatBtn3">
            <i class="fa fa-plus"></i>
          </button>
          <button class="header-btn" id="moreBtn3">
            <i class="fa fa-ellipsis-v"></i>
          </button>
        </div>
      </div>
      
      <div class="view-tabs">
        <button class="view-tab active" data-view="messages">消息</button>
        <button class="view-tab" data-view="contacts">通讯录</button>
      </div>
      
      <div class="search-bar">
        <input type="text" class="search-input" placeholder="搜索消息或联系人...">
      </div>
      
      <div class="content-area">
        <div class="view-content active" id="messagesView3">
          <div class="message-list">
            <!-- 消息列表内容与风格1相同 -->
            <div class="list-item unread">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=1" alt="头像" class="item-avatar">
                <span class="status-indicator status-online"></span>
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">张小明</span>
                  <span class="item-time">刚刚</span>
                </div>
                <div class="item-message">
                  <span class="message-text">好的，我稍后发给你</span>
                  <span class="unread-badge">2</span>
                </div>
              </div>
            </div>
            
            <div class="list-item">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=2" alt="头像" class="item-avatar">
                <span class="status-indicator status-away"></span>
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">王芳</span>
                  <span class="item-time">昨天</span>
                </div>
                <div class="item-message">
                  <span class="message-text">我们下周再讨论细节吧</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="view-content" id="contactsView3">
          <div class="contact-list">
            <!-- 通讯录内容与风格1相同 -->
            <div class="contact-group">常用联系人</div>
            
            <div class="list-item">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=1" alt="头像" class="item-avatar">
                <span class="status-indicator status-online"></span>
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">张小明</span>
                </div>
                <div class="item-message">
                  <span class="message-text">产品设计师</span>
                </div>
              </div>
            </div>
          </div>
          
          <div class="letter-nav">
            <button class="letter-btn">常</button>
            <button class="letter-btn">A</button>
            <button class="letter-btn">B</button>
            <button class="letter-btn">C</button>
            <button class="letter-btn">...</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格4：简约风 -->
    <div id="style4" class="app-style">
      <!-- 结构与风格1相同，样式由CSS控制 -->
      <div class="app-header">
        <h1 class="header-title">社交平台</h1>
        <div class="header-actions">
          <button class="header-btn" id="newChatBtn4">
            <i class="fa fa-plus"></i>
          </button>
          <button class="header-btn" id="moreBtn4">
            <i class="fa fa-ellipsis-v"></i>
          </button>
        </div>
      </div>
      
      <div class="view-tabs">
        <button class="view-tab active" data-view="messages">消息</button>
        <button class="view-tab" data-view="contacts">通讯录</button>
      </div>
      
      <div class="search-bar">
        <input type="text" class="search-input" placeholder="搜索...">
      </div>
      
      <div class="content-area">
        <div class="view-content active" id="messagesView4">
          <div class="message-list">
            <!-- 消息列表内容与风格1相同 -->
            <div class="list-item unread">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=1" alt="头像" class="item-avatar">
                <span class="status-indicator status-online"></span>
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">张小明</span>
                  <span class="item-time">刚刚</span>
                </div>
                <div class="item-message">
                  <span class="message-text">好的，我稍后发给你</span>
                  <span class="unread-badge">2</span>
                </div>
              </div>
            </div>
            
            <div class="list-item unread">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=10" alt="头像" class="item-avatar">
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">设计交流群</span>
                  <span class="item-time">10:24</span>
                </div>
                <div class="item-message">
                  <span class="message-text">李华：@你 这个设计很棒</span>
                  <span class="unread-badge">5</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="view-content" id="contactsView4">
          <div class="contact-list">
            <!-- 通讯录内容与风格1相同 -->
            <div class="contact-group">常用联系人</div>
            
            <div class="list-item">
              <div class="item-avatar">
                <img src="https://picsum.photos/100/100?random=1" alt="头像" class="item-avatar">
                <span class="status-indicator status-online"></span>
              </div>
              <div class="item-content">
                <div class="item-header">
                  <span class="item-name">张小明</span>
                </div>
                <div class="item-message">
                  <span class="message-text">产品设计师</span>
                </div>
              </div>
            </div>
          </div>
          
          <div class="letter-nav">
            <button class="letter-btn">常</button>
            <button class="letter-btn">A</button>
            <button class="letter-btn">B</button>
            <button class="letter-btn">C</button>
            <button class="letter-btn">...</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 弹出窗口：新建聊天 -->
  <div class="modal-backdrop" id="newChatModal">
    <div class="modal">
      <div class="modal-header">
        <h3 class="modal-title">新建聊天</h3>
        <button class="modal-close" id="closeNewChatModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <div class="list-item">
          <div class="item-avatar">
            <div style="width: 100%; height: 100%; border-radius: 50%; background-color: var(--light); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 20px;">
              <i class="fa fa-user-plus"></i>
            </div>
          </div>
          <div class="item-content">
            <div class="item-header">
              <span class="item-name">添加联系人</span>
            </div>
            <div class="item-message">
              <span class="message-text">通过手机号或用户名添加</span>
            </div>
          </div>
        </div>
        
        <div class="list-item">
          <div class="item-avatar">
            <div style="width: 100%; height: 100%; border-radius: 50%; background-color: var(--light); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 20px;">
              <i class="fa fa-users"></i>
            </div>
          </div>
          <div class="item-content">
            <div class="item-header">
              <span class="item-name">创建群聊</span>
            </div>
            <div class="item-message">
              <span class="message-text">邀请好友加入群聊</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 弹出窗口：联系人信息 -->
  <div class="modal-backdrop" id="contactInfoModal">
    <div class="modal">
      <div class="modal-header">
        <h3 class="modal-title">联系人信息</h3>
        <button class="modal-close" id="closeContactInfoModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <div style="text-align: center; margin-bottom: 20px;">
          <img src="https://picsum.photos/100/100?random=1" alt="头像" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 10px;">
          <h4 style="margin: 0 0 5px;">张小明</h4>
          <p style="margin: 0; color: var(--success); font-size: 14px;"><i class="fa fa-circle"></i> 在线</p>
        </div>
        
        <div style="margin-bottom: 16px;">
          <p style="font-size: 14px; color: var(--gray); margin: 0 0 8px;">个人信息</p>
          <div style="font-size: 14px; margin-bottom: 8px;">
            <span style="color: var(--secondary);">职位：</span>
            <span>产品设计师</span>
          </div>
          <div style="font-size: 14px;">
            <span style="color: var(--secondary);">公司：</span>
            <span>创新科技有限公司</span>
          </div>
        </div>
        
        <div class="d-flex gap-3">
          <button class="modal-btn modal-btn-secondary" style="flex: 1;">
            <i class="fa fa-phone mr-1"></i> 通话
          </button>
          <button class="modal-btn modal-btn-primary" style="flex: 1;">
            <i class="fa fa-comment mr-1"></i> 发消息
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 操作菜单：更多选项 -->
  <div class="action-sheet-backdrop" id="moreActionsBackdrop"></div>
  <div class="action-sheet" id="moreActionsSheet">
    <div class="action-title">更多选项</div>
    <div class="action-buttons">
      <button class="action-btn action-btn-primary">
        <i class="fa fa-cog mr-2"></i> 设置
      </button>
      <button class="action-btn action-btn-primary">
        <i class="fa fa-star-o mr-2"></i> 收藏联系人
      </button>
      <button class="action-btn action-btn-danger">
        <i class="fa fa-ban mr-2"></i> 屏蔽此人
      </button>
      <button class="action-btn action-btn-cancel" id="cancelMoreActions">
        取消
      </button>
    </div>
  </div>
  
  <!-- 顶部提示 -->
  <div class="toast" id="toastNotification">消息已删除</div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 风格切换功能
    document.querySelectorAll('.style-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的风格页面
        const styleId = this.getAttribute('data-style');
        document.querySelectorAll('.app-style').forEach(style => {
          style.style.display = 'none';
        });
        document.getElementById(styleId).classList.add('active');
        document.getElementById(styleId).style.display = 'flex';
        document.getElementById(styleId).style.flexDirection = 'column';
      });
    });
    
    // 视图切换功能（消息/通讯录）
    document.querySelectorAll('.view-tab').forEach(tab => {
      tab.addEventListener('click', function() {
        const appStyle = this.closest('.app-style');
        const viewName = this.getAttribute('data-view');
        
        // 更新标签状态
        appStyle.querySelectorAll('.view-tab').forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的视图
        appStyle.querySelectorAll('.view-content').forEach(view => {
          view.classList.remove('active');
        });
        appStyle.querySelector(`[id^="${viewName}View"]`).classList.add('active');
      });
    });
    
    // 新建聊天按钮点击事件
    document.querySelectorAll('[id^="newChatBtn"]').forEach(btn => {
      btn.addEventListener('click', function() {
        document.getElementById('newChatModal').classList.add('active');
      });
    });
    
    // 关闭新建聊天窗口
    document.getElementById('closeNewChatModal').addEventListener('click', function() {
      document.getElementById('newChatModal').classList.remove('active');
    });
    
    // 关闭联系人信息窗口
    document.getElementById('closeContactInfoModal').addEventListener('click', function() {
      document.getElementById('contactInfoModal').classList.remove('active');
    });
    
    // 更多按钮点击事件
    document.querySelectorAll('[id^="moreBtn"]').forEach(btn => {
      btn.addEventListener('click', function() {
        document.getElementById('moreActionsSheet').classList.add('active');
        document.getElementById('moreActionsBackdrop').classList.add('active');
      });
    });
    
    // 取消更多操作
    document.getElementById('cancelMoreActions').addEventListener('click', function() {
      document.getElementById('moreActionsSheet').classList.remove('active');
      document.getElementById('moreActionsBackdrop').classList.remove('active');
    });
    
    // 点击更多操作背景关闭
    document.getElementById('moreActionsBackdrop').addEventListener('click', function() {
      document.getElementById('moreActionsSheet').classList.remove('active');
      document.getElementById('moreActionsBackdrop').classList.remove('active');
    });
    
    // 列表项点击事件 - 打开联系人信息
    document.querySelectorAll('.list-item').forEach(item => {
      item.addEventListener('click', function() {
        // 如果是消息列表中的项，模拟进入聊天界面
        if (this.closest('.message-list')) {
          showToast('进入聊天界面');
        } 
        // 如果是通讯录中的项，显示联系人信息
        else if (this.closest('.contact-list')) {
          document.getElementById('contactInfoModal').classList.add('active');
        }
      });
    });
    
    // 长按列表项 - 显示更多操作
    document.querySelectorAll('.list-item').forEach(item => {
      item.addEventListener('contextmenu', function(e) {
        e.preventDefault();
        document.getElementById('moreActionsSheet').classList.add('active');
        document.getElementById('moreActionsBackdrop').classList.add('active');
      });
      
      // 移动端长按事件
      let pressTimer;
      item.addEventListener('touchstart', function(e) {
        pressTimer = setTimeout(() => {
          document.getElementById('moreActionsSheet').classList.add('active');
          document.getElementById('moreActionsBackdrop').classList.add('active');
        }, 500);
      });
      
      item.addEventListener('touchend', function() {
        clearTimeout(pressTimer);
      });
    });
    
    // 字母导航点击事件
    document.querySelectorAll('.letter-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        document.querySelectorAll('.letter-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        const letter = this.textContent;
        let targetGroup;
        
        // 查找对应字母的分组
        if (letter === '常') {
          targetGroup = document.querySelector('.contact-group');
        } else {
          targetGroup = document.querySelector(`.contact-group:contains('${letter}')`);
        }
        
        // 滚动到对应分组
        if (targetGroup) {
          targetGroup.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      });
    });
    
    // 显示提示消息
    function showToast(message) {
      const toast = document.getElementById('toastNotification');
      toast.textContent = message;
      toast.classList.add('active');
      
      setTimeout(() => {
        toast.classList.remove('active');
      }, 2000);
    }
    
    // 为"屏蔽此人"按钮添加事件
    document.querySelector('.action-btn-danger').addEventListener('click', function() {
      document.getElementById('moreActionsSheet').classList.remove('active');
      document.getElementById('moreActionsBackdrop').classList.remove('active');
      showToast('已屏蔽此人');
    });
    
    // 初始化 - 隐藏所有风格，只显示默认风格
    document.querySelectorAll('.app-style').forEach(style => {
      if (!style.classList.contains('active')) {
        style.style.display = 'none';
      }
    });
    
    // 添加contains选择器支持
    if (!String.prototype.includes) {
      String.prototype.includes = function() {
        'use strict';
        return String.prototype.indexOf.apply(this, arguments) !== -1;
      };
    }
  </script>
</body>
</html>
